<template>
	<view class="filterWrapper">
		<!--<view class="title-padding"></view>-->
		<view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view>
		<view class="filterItem">
			<text>
			   商品编码
			</text>
			<input type="text" placeholder="商品编码" v-model="GoodsCode" />
		</view>
		<view class="filterItem">
			<text>
				商品名称
			</text>
			<input type="text" placeholder="商品名称" v-model="GoodsName" />
		</view>
		<view class="filterItem">
			<text>
				主条码
			</text>
			<input type="text" placeholder="主条码" v-model="BarCode" />
		</view>
		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']

				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				ClientName: "",
				StoreID: "",
				GoodsName: "",
				list: [],
				storeList: [],
				GoodsCode:"",
				
				BarCode:""
			};
		},
		
		created() {
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
		},
		methods: {
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				var filter = "";
				if(this.GoodsCode!=""){
					filter+="GoodsCode='"+this.GoodsCode+"'";
				}
				if(this.GoodsName!=''){
					if(filter==""){
						filter+="GoodsName='"+this.GoodsName+"'";
					}else{
						filter+=" and GoodsName='"+this.GoodsName+"'";
					}
				}
				if(this.BarCode!=''){
					if(filter==""){
						filter+="BarCode='"+this.BarCode+"'";
					}else{
						filter+=" and BarCode='"+this.BarCode+"'";
					}
				}
				
				let data = {
					GoodsCode:this.GoodsCode,
					GoodsName:this.GoodsName,
					BarCode:this.BarCode,
					Filter:filter,
					BillName:'商品档案'
				};
				this.$eventHub.$emit('fire',data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			}
		}
	};
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		padding: 0px;
	}

	page {
		width: 100%;
		height: 100%;
		background: #ebebeb;
	}

	.filterWrapper {
		background: #FFF;
		padding-bottom: 15upx;
	}

	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	.filterHeader {
		width: 100%;
		height: 50px;
		line-height: 50px;
		position: relative;
		text-align: center;
		background: $bb-bg-color;
		color: #FFF;
		font-size: 18px;
		background-size: 100%;

		.pd {
			display: inline-block;
			position: absolute;
			margin-left: 10px;
			top: 30upx;
			left: 0px;
			font-size: 14px;
			width: 40upx;
			height: 40upx;
			background: url(../../static/back.png) no-repeat;
			background-size: 100%;
		}

		.options {
			position: absolute;
			right: 0px;
			top: 10px;
			width: 80px;
			display: flex;
			text-align: right;

			.setting {
				width: 30px;
				height: 30px;
				background: url(../../static/sureFilter.png) no-repeat;
				background-size: 30px;
				border: none;
				margin-left: 90upx;

			}
		}

	}

	.filterItem {
		height: 120upx;
		line-height: 120upx;
		background: #FFF;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 32upx;
		background: #FFF;

		text {
			flex: 1;

			&:last-child {
				text-align: right;
			}
		}

		input {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 50upx;
			border-bottom: 1px solid #ebebeb;
		}

		view.selectInput {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 22upx;
			border-bottom: 1px solid #ebebeb;

			input {
				flex: 1;
				height: 40upx;
				line-height: 40upx;
				margin-top: 50upx;
				border-bottom: 1px solid #ebebeb;
			}
		}
	}
</style>
